<template>
  <div class="inline-flex items-center space-x-2">
    <button
      :disabled="currentPage === 1"
      @click="prev"
      class="px-3 py-1 rounded-md bg-white text-gray-600 hover:bg-purple-100 disabled:opacity-50 disabled:cursor-not-allowed"
    >
      上一页
    </button>

    <div class="flex space-x-1">
      <button
        v-for="page in totalPages"
        :key="page"
        :class="{
          'bg-purple-100 text-purple-600 font-semibold': currentPage === page,
          'hover:bg-purple-50': currentPage !== page
        }"
        class="px-3 py-1 rounded-md text-gray-600"
        @click="goToPage(page)"
      >
        {{ page }}
      </button>
    </div>

    <button
      :disabled="currentPage === totalPages"
      @click="next"
      class="px-3 py-1 rounded-md bg-white text-gray-600 hover:bg-purple-100 disabled:opacity-50 disabled:cursor-not-allowed"
    >
      下一页
    </button>
  </div>
</template>

<script>
export default {
  name: "Pagination",
  props: {
    total: {
      type: Number,
      required: true
    },
    pageSize: {
      type: Number,
      default: 5
    },
    currentPage: {
      type: Number,
      default: 1
    }
  },
  computed: {
    totalPages() {
      return Math.ceil(this.total / this.pageSize);
    }
  },
  methods: {
    prev() {
      if (this.currentPage > 1) {
        this.$emit("page-changed", this.currentPage - 1);
      }
    },
    next() {
      if (this.currentPage < this.totalPages) {
        this.$emit("page-changed", this.currentPage + 1);
      }
    },
    goToPage(page) {
      this.$emit("page-changed", page);
    }
  }
};
</script>
